import React, { useState } from 'react'
import { Layout, Dropdown, Menu, Avatar, Button } from "antd"
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UserOutlined
} from '@ant-design/icons';
import { useHistory } from 'react-router-dom';
import { useDispatch, useSelector } from "react-redux"
import { changeCollapsed } from '../../store/modules/collapsed.slice';
const { Header } = Layout;
function TopHeader(props) {
    // const [collapsed, setCollapsed] = useState(false)
    const history = useHistory();
    const localStorageList = JSON.parse(localStorage.getItem("token"));
    const { role: { roleName }, username } = localStorageList
    const menu = (
        <Menu
            items={[
                {
                    key: '1',
                    label: (
                        <div>{roleName}</div>
                    ),
                },
                {
                    key: '2',
                    label: (
                        <Button type="primary" danger onClick={() => {
                            // 删除token
                            localStorage.removeItem("token")
                            history.replace("/login")
                        }}>退出登录</Button>
                    ),
                },
            ]}
        />
    );
    const change = () => {
        dispatch(changeCollapsed());
    }
    const collapsed = useSelector(state => state.isCollapsed.collapsed)
    const dispatch = useDispatch()
    //点击进行切换功能
    return (
        <Header className="site-layout-background" style={{ padding: "0 16px" }} collapsed={collapsed ? 1 : 0}
            onClick={() => dispatch(changeCollapsed())}
        >
            {/* props.isCollapsed */}
            {collapsed ? <MenuUnfoldOutlined></MenuUnfoldOutlined> : <MenuFoldOutlined></MenuFoldOutlined>}
            {/* 用户管理菜单 */}
            <div style={{ float: "right" }}>
                <span style={{ marginRight: "10px" }}>欢迎<span style={{ color: "blue", display: 'inline-block', margin: '0 10px', fontSize: 18 }}>{username}</span>用户</span>
                <Dropdown overlay={menu} placement="bottomRight">
                    <div style={{ display: "inline-block" }}>
                        <Avatar size="large" icon={<UserOutlined />} />
                    </div>
                </Dropdown>
            </div>

        </Header>
    )
}
// const mapStateToProps = ({ Collapsed: { isCollapsed } }) => {
//     return {
//         isCollapsed
//     }
// }
// const mapDispatchToProps = ({
//     changecollapsed() {
//         return {
//             type: "changecollapsed"
//         }
//     }
// })
// export default connect(mapStateToProps, mapDispatchToProps)(TopHeader)
export default TopHeader